import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  title: 'simple login',
  home: AppPage(),
));

class AppPage extends StatelessWidget {
  GlobalKey<FormState> _loginKey = GlobalKey();

  late String _username;
  late String _password;

  void _login() {
    var loginForm = _loginKey.currentState;
    if(loginForm!.validate()){
      //保存表单字段的值到对应的变量（_username 和 _password）
      loginForm.save();
      print('username: $_username, password: $_password');
    }
  }

  @override
  Widget build(BuildContext context) {
    //Scaffold：是 Flutter 中的基本布局组件，提供了一个默认的应用结构，包括 AppBar、Drawer、FloatingActionButton 等。
    return Scaffold(
      //AppBar：应用的顶部导航栏
      appBar: AppBar(
        title: Text('Simple login'),
      ),
      //Container：设置外层容器的边距。
      body: Container(
        margin: EdgeInsets.all(26.0),
        child: Center(
          //Form：表单组件，用于组合多个输入控件，并管理它们的状态。
          child: Form(
            //key: _loginKey：将 _loginKey 传递给 Form，以便访问和操作表单状态。
            key: _loginKey,
            child: Center(
              child: Column(
                children: <Widget>[
                  TextFormField(
                    //decoration：设置输入框的外观，包括标签、提示文本、边框等。
                    decoration: InputDecoration(
                        labelText: '请输入登录用户名',
                        hintText: '请输入登录用户名',
                        border: OutlineInputBorder()
                    ),
                    //onSaved：当表单保存时，获取输入框的值并将其存储在 _username 变量中。
                    onSaved: (val) {
                      _username = val!;
                    },
                    onFieldSubmitted: (val) {},
                    //validator：用于验证输入内容。如果输入为空，则返回错误提示 用户名不能为空。
                    validator: (val){
                      if(val!.length == 0) return '用户名不能为空';
                    },
                  ),
                  SizedBox(
                    height: 10.0,
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                        labelText: '请输入用户密码',
                        hintText: '请输入用户密码',
                        border: OutlineInputBorder()),
                    onSaved: (val){
                      _password = val!;
                    },
                    onFieldSubmitted: (val) {},
                    validator: (val){
                      if(val!.length < 3) return '密码不能小于3个字符';
                      if(val!.length > 6) return '密码不能大于6个字符';
                      else return null;
                    },
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 30.0),
                    child: SizedBox(
                      width: 400.0,
                      height: 45.0,
                      //FilledButton：这是一个 Flutter 3.x 中新增的按钮组件，用来触发登录操作。点击按钮时会调用 _login 方法。
                      child: FilledButton(
                        onPressed: _login,
                        child: Text(
                          '登录',
                          style: TextStyle(color: Colors.black, fontSize: 20.0),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
